<html>
  <head>
    <title>Token Test Harness</title>
    <link href='https://fonts.googleapis.com/css?family=Work Sans' rel='stylesheet'>
    <style>
      body{font-family: "Work Sans", sans-serif;padding: 20px;background: #fafafa;}
      h1{font-weight: bold;}
      input, button {padding: 6px;margin-bottom: 8px;}
      button{font-weight: bold;font-family: "Work Sans", sans-serif;}
      td{vertical-align: middle;}
    </style>
    <script src='https://unpkg.com/xrpl@4.0.0/build/xrpl-latest.js'></script>
    <script src='ripplex2-send-currency.js'></script>
    <script src='ripplex3a-create-offers.js'></script>
    <script src='ripplex3b-NameFieldSupport.js'></script>
    <script>
      if (typeof module !== "undefined") {
        const xrpl = require('xrpl')
      }
    </script>
  </head>
  <!-- ************************************************************** -->
  <!-- ********************** The Form ****************************** -->
  <!-- ************************************************************** -->
  <body>
    <h1>Token Test Harness</h1>
    <form id="theForm">
      Choose your ledger instance:  
      &nbsp;&nbsp;
      <input type="radio" id="tn" name="server"
        value="wss://s.altnet.rippletest.net:51233" checked>
      <label for="testnet">Testnet</label>
      &nbsp;&nbsp;
      <input type="radio" id="dn" name="server"
        value="wss://s.devnet.rippletest.net:51233">
      <label for="devnet">Devnet</label>
      <br/><br/>
      <button type="button" onClick="getAccountsFromSeeds()">Get Accounts From Seeds</button>
      <br/>
      <textarea id="seeds" cols="55" rows= "4"></textarea>
      <table>
        <tr valign="top">
          <td>
            <table>
              <tr valign="top">
                <td>
                  <button type="button" onClick="getAccount('standby')">Get New Account</button>
                  <table>
                    <tr valign="top">
                      <td align="right">
                        Account Name
                      </td>
                      <td>
                        <input type="text" id="standbyNameField" size="40"></input>
                        <br>
                      </td>
                    </tr>
                    <tr valign="top">
                      <td align="right">
                        Account
                      </td>
                      <td>
                        <input type="text" id="standbyAccountField" size="40"></input>
                        <br>
                      </td>
                    </tr>
                    <tr>
                      <td align="right">
                        Seed
                      </td>
                      <td>
                        <input type="text" id="standbySeedField" size="40"></input>
                        <br>
                      </td>
                    </tr>
                    <tr>
                      <td align="right">
                        XRP Balance
                      </td>
                      <td>
                        <input type="text" id="standbyBalanceField" size="40"></input>
                        <br>
                      </td>
                    </tr>
                    <tr>
                      <td align="right">
                        Amount
                      </td>
                      <td>
                        <input type="text" id="standbyAmountField" size="40"></input>
                        <br>
                      </td>
                    </tr>
                    <tr>
                      <td align="right">
                        Destination
                      </td>
                      <td>
                        <input type="text" id="standbyDestinationField" size="40"></input>
                        <br>
                      </td>
                    </tr>
                    <tr valign="top">
                      <td><button type="button" onClick="configureAccount('standby',document.querySelector('#standbyDefault').checked)">Configure Account</button></td>
                      <td>
                        <input type="checkbox" id="standbyDefault" checked="false"/>
                        <label for="standbyDefault">Allow Rippling</label>
                      </td>
                    </tr>
                    <tr>
                      <td align="right">
                        Currency
                      </td>
                      <td>
                        <input type="text" id="standbyCurrencyField" size="40" value="USD"></input>
                      </td>
                    </tr>
                    <tr>
                      <td align="right">
                        Offer Sequence
                      </td>
                      <td>
                        <input type="text" id="standbyOfferSequenceField" size="10"></input>                        
                      </td>
                    </tr>
                    </td>
                    </tr>
                  </table>
                </td>
              </tr>
              <tr>
                <td>
                  <table>
                    <tr>
                      <td>
                        Taker Pays:<br/>
                        Currency: <input type="text" id="standbyTakerPaysCurrencyField" size="10"></input><br/>
                        Issuer: <input type="text" id="standbyTakerPaysIssuerField" size="35"></input><br/>
                        Value: <input type="text" id="standbyTakerPaysValueField" size="10"></input>
                      </td>
                      <td>
                        Taker Gets:<br/>
                        Currency: <input type="text" id="standbyTakerGetsCurrencyField" size="10"></input><br/>
                        Issuer: <input type="text" id="standbyTakerGetsIssuerField" size="35"></input><br/>
                        Value: <input type="text" id="standbyTakerGetsValueField" size="10"></input><br/>
                      </td>
                    </tr>
                  </table>
                  <p align="left">
                    <textarea id="standbyResultField" cols="80" rows="20" ></textarea>
                  </p>
                </td>
              </tr>
            </table>
          </td>
<!-- Standby Buttons, Column 2 -->
          <td>
            <table>
              <tr valign="top">
                <td align="center" valign="top">
                  <button type="button" onClick="sendXRP()">Send XRP&#62;</button>
                  <br/>
                  <button type="button" onClick="createTrustline()">Create Trust Line</button>
                  <br/>
                  <button type="button" onClick="getTrustLines()">Get Trust Lines</button>
                  <br/>
                  <button type="button" onClick="sendCurrency()">Send Currency</button>
                  <br/>
                  <button type="button" onClick="getBalances()">Get Balances</button>
                  <br/><br/>
                  <button type="button" onClick="createOffer()">Create Offer</button>
                  <br/>
                  <button type="button" onClick="getOffers()">Get Offers</button>
                  <br/>
                  <button type="button" onClick="cancelOffer()">Cancel Offer</button>
                </td>
              </tr>
            </table>
          </td>
<!-- Operational Buttons, Column 3 -->
          <td>
            <table>
              <tr valign="bottom">
                <td align="center" valign="middle">
                  <button type="button" onClick="oPsendXRP()">&#60; Send XRP</button>
                  <br/>
                  <button type="button" onClick="oPcreateTrustline()">Create Trust Line</button>
                  <br/>
                  <button type="button" onClick="oPgetTrustLines()">Get Trust Lines</button>
                  <br/>
                  <button type="button" onClick="oPsendCurrency()">Send Currency</button>
                  <br/>
                  <button type="button" onClick="getBalances()">Get Balances</button>
                  <br/><br/>
                  <button type="button" onClick="oPcreateOffer()">Create Offer</button>
                  <br/>
                  <button type="button" onClick="oPgetOffers()">Get Offers</button>
                  <br/>
                  <button type="button" onClick="oPcancelOffer()">Cancel Offer</button>
                </td>
              </tr>
            </table>
          </td>
          
<!-- Operational fields, Column 4 -->

          <td valign="top" align="right">
            <button type="button" onClick="getAccount('operational')">Get New Account</button>
            <table>
              <tr valign="top">
                <td align="left">
                  Account Name
                </td>
                <td align="left">
                  <input type="text" id="operationalNameField" size="40"></input>
                  <br>
                </td>
              </tr>
              <tr valign="top">
                <td align="right">
                  Account
                </td>
                <td>
                  <input type="text" id="operationalAccountField" size="40"></input>
                  <br>
                </td>
              </tr>
              <tr>
                <td align="right">
                  Seed
                </td>
                <td>
                  <input type="text" id="operationalSeedField" size="40"></input>
                  <br>
                </td>
              </tr>
              <tr>
                <td align="right">
                  XRP Balance
                </td>
                <td>
                  <input type="text" id="operationalBalanceField" size="40"></input>
                  <br>
                </td>
              </tr>
              <tr>
                <td align="right">
                  Amount
                </td>
                <td>
                  <input type="text" id="operationalAmountField" size="40"></input>
                  <br>
                </td>
              </tr>
              <tr>
                <td align="right">
                  Destination
                </td>
                <td>
                  <input type="text" id="operationalDestinationField" size="40"></input>
                  <br>
                </td>
              </tr>
              <tr>
                <td></td>
                <td align="right">
                  <input type="checkbox" id="operationalDefault" checked="false"/>
                  <label for="operationalDefault">Allow Rippling</label>
                  <button type="button" onClick="configureAccount('operational',document.querySelector('#operationalDefault').checked)">Configure Account</button>
                </td>
              </tr>
              <tr>
                <td align="right">
                  Currency
                </td>
                <td>
                  <input type="text" id="operationalCurrencyField" size="40" value="USD"></input>
                </td>
              </tr>
              <tr>
                <td align="right">
                  Offer Sequence
                </td>
                <td>
                  <input type="text" id="operationalOfferSequenceField" size="10"></input>                        
                </td>
              </tr>
            </table>
            <table>
              <tr>
                <td>
                  Taker Pays:<br/>
                  Currency: <input type="text" id="operationalTakerPaysCurrencyField" size="10"></input><br/>
                  Issuer: <input type="text" id="operationalTakerPaysIssuerField" size="35"></input><br/>
                  Value: <input type="text" id="operationalTakerPaysValueField" size="10"></input>
                </td>
                <td>
                  Taker Gets:<br/>
                  Currency: <input type="text" id="operationalTakerGetsCurrencyField" size="10"></input><br/>
                  Issuer: <input type="text" id="operationalTakerGetsIssuerField" size="35"></input><br/>
                  Value: <input type="text" id="operationalTakerGetsValueField" size="10"></input><br/>
                </td>
              </tr>
            </table>
            <p align="right">
              <textarea id="operationalResultField" cols="80" rows="20" ></textarea>
            </p>
          </td>
        </tr>
      </table>
    </form>
  </body>
</html>